<template>
  <div class='wrap'>
    <div class='container'>
       <el-card class="box-card fixedo" :class="{ is_fixed: isFixed }">
        <div slot="header" class="clearfix">
          <span>目录结构</span>
        </div>
      </el-card>
    </div>
   </div>
</template>

<script>
export default {
  name: 'Directory',
  components: {},
  data () {
    return {
      isFixed: false,
      scrollTop: 0,
      offsetTop: []
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  created () {},
  methods: {
    handleScroll (e) {
      this.scrollTop = e.target.scrollTop
      const offsetTop = document.querySelector('.fixedo').offsetTop

      if (this.scrollTop > offsetTop) {
        // 判断是否到达了顶部
        this.isFixed = true // 到底顶部把状态改为true
        if (this.offsetTop.length <= 0) {
          // 如果这个数组里面是空的并且小于等于0的时候就把offsetTop的位置给数组里面保存，如果不判断的话这个数组会有很多0数据
          this.offsetTop.push(offsetTop)
        }
        if (this.scrollTop < this.offsetTop[0]) {
          // 判断当前位置是否小于存在数组的数据 ，是的话就把状态改为false
          this.isFixed = false
          this.offsetTop = []
        }
      } else {
        this.isFixed = false
      }
      // console.log( 'scrollTop',this.scrollTop);
      // console.log('offsetTop []',this.offsetTop);
    }
  }
}
</script>
<style lang="scss" scoped>
 .is_fixed {
      position: fixed;
      width: 324px;
      top: 0;
      z-index: 999;
    }
</style>
